<template>
	<u-popup :show="visible" :round="10" mode="bottom" :closeable="true" :closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			<view class="tip">
				 <text>{{title}}</text>
			</view>
			<view style="margin-top:30rpx;">
				<view class="form">
					
					<view class="inp">
						<view class="left">
							<text>所在地区：</text>
						</view>
						<view class="right"  style="flex: 1;justify-content: flex-end;" @click="chooseAddress">
							<text v-if="form.areaAddress">{{form.areaAddress}}</text>
							<text v-else style="color: #999;">请选择所在地区</text>
							<u-icon slot="right" name="map-fill" color="#277EEF" size='20' ></u-icon>
						</view>
					</view>
					<view class="inp">
						<view class="left">
							<text>详细地址：</text>
						</view>
						<view class="right"  style="flex: 1;">
							 <input style="width: 100%;" type="text" class="input" placeholder="请输入详细地址(请具体到门牌号)" v-model="form.detailAddress"  />	 
						</view>
					</view>
				 
					<view class="inp">
						<view class="left">
							<text>姓名：</text>
						</view>
						<view class="right">
							 <input type="text" class="input" placeholder="请输入姓名" v-model="form.name"  />
						</view>
					</view>
					<view class="inp">
						<view class="left">
							<text>手机号码：</text>
						</view>
						<view class="right">
							 <input type="tel" class="input" placeholder="请输入手机号" v-model="form.mobile"  />
						</view>
					</view>
				</view>
				 
			</view>
			
			<view class="woodsbtn" style="width: 90%;margin: 120rpx auto 40rpx;font-size: 26rpx;" @click="handleChange">
				确认修改
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	import {addressupdateAPI,addresscreateAPI,addressInfoAPI,addressdeleteAPI,getAddressgetAddressjwAPI} from "@/api/user.js"
	 
	import {updateOrderAPI,orderdetailAPI } from "@/api/order.js"
	import {getcityAPI} from "@/api/home.js"
	export default {
		name:"woods-popupModal",
		props: {
			 title:{
				 type:String,
				 default:"批量修改地址"
			 },
			 dict:{
				 type:String,
				 default:""
			 }
		},
		created() {
			//this.getCityList()	
		}, 
		data() {
			return {
				visible:false,
				money:-1, 
				checked:[],
				reasonList :[],
				form:{
					areaAddress:"", 
					longitude:"",
					latitude:"",
					detailAddress:""
				},
				id: 0, // 地址 id
				serveInfo:{} ,
				ids:[]
			};
		},
		watch:{
		 
		} ,
		 
		methods:{
			getinit(ids){
				this.ids=ids
				this.visible=true
				// 详情
				orderdetailAPI({id:this.ids[0]}).then(res=>{
				 
					this.form={
						name:res.receiverName,
						mobile:res.receiverMobile,
						areaAddress:res.areaAddress,
						detailAddress:res.receiverDetailAddress,
						id:res.addressId,
						longitude:res.longitude,
						latitude:res.latitude
					} 
				})
			},
			chooseAddress(){
				var _this=this
				uni.chooseLocation({
					success(res) {
						let address = res.address;
						_this.form.latitude = res.latitude; //纬度
						_this.form.longitude = res.longitude; //经度
						_this.form.areaAddress = address 
						_this.getcity(res)
					}
				})
			},
			getcity({longitude,latitude}){
				getcityAPI({longitude,latitude}).then(rest=> {
					let res = rest
					this.form.city=res.city
					this.form.areaId=res.districtId
					this.form.cityCode=res.cityId
				})
			},
			 
			/*
			@description 回调事件
			*/ 
			handleChange(){
				const value = this.form;
				if (!value.name)return uni.showToast({ title:"请填写收姓名", icon:"none" })  
				if (!value.mobile) {
					return uni.showToast({
						title:"请填写联系电话",
						icon:"none"
					})
				}
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.mobile)) {
					return uni.showToast({
						title:"请填写正确的联系电话",
						icon:"none"
					})				 
				}
				if (!value.areaAddress) {
				 	return uni.showToast({
				 		title: '请选择地区地址',
				 		icon:"none"
				 	});
				} 
				if (!value.detailAddress) {
					return uni.showToast({
						title: '请填写详细地址',
						icon:"none"
					});
				} 
				
				let data={
					...this.serveInfo,
					receiverAreaId:value.cityCode,
					receiverName: value.name,
					receiverMobile:value.mobile,
					receiverDetailAddress: value.detailAddress,
					areaAddress:value.areaAddress,
					longitude:value.longitude,
					latitude: value.latitude,
					ids:this.ids
				} 
				delete data.id
				updateOrderAPI(data).then(res=>{
					uni.showToast({
						title:'修改成功'
					})
					this.visible=false
					 this.$emit("callBack")
				})
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding:35rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		 
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	.scroll{
		width: 100%;
		height: 600rpx;
		padding-bottom: 30rpx;
		/* background-color: red; */
	} 
}
.form{ 
	  
	margin-top: 20rpx;
	.inp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 0;
		border-bottom: 1px solid #F4F6FA;
		.left{
			display: flex;
			align-items: center;
			image{
				width: 45rpx;
			}
			>text{
				color: #333333;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
		
		input{
			text-align: right;
		}
		.right{
			display: flex;
			align-items: center;
			>image{
				width: 40rpx;
			}
		}
		.datetime{
			display: flex;
			align-items: center;
			text{
				color: #7C8191;
			}
			image{
				width: 35rpx;
			}
		}
		.textarea{
			width: 100%;
			box-sizing: border-box;
			background-color: #F4F6FA;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 40rpx;
			textarea{
				width: 100%;
				height: 40rpx;
			}
		}
	}
}
  
</style>